.vertical-nav-item {
	> .gridicon {
		box-sizing: border-box;
		color: var(--color-neutral-20);
		display: block;
		height: 100%;
		position: absolute;
		top: 0;
		right: 16px;
	}

	&.disabled {
		> svg,
		span {
			opacity: 0.5;
		}
	}
}

.vertical-nav-item.is-placeholder {
	span {
		@include placeholder( --color-neutral-10 );

		display: inline-block;

		&:first-child {
			width: 35%;
		}

		&:last-child {
			float: right;
			width: 22px;
		}
	}
}

.vertical-nav-item-enhanced {
	span {
		display: flex;
		align-items: center;

		.vertical-nav-item-enhanced__icon {
			fill: var(--color-neutral-60);
			width: 32px;
			height: 32px;
			margin-right: 16px;
		}

		div {
			color: var(--color-neutral-90);

			small {
				color: var(--color-neutral-50);
				font-size: $font-body-small;
			}
		}
	}

	a:hover & {
		background: var(--color-neutral-0);
	}
}
